color: @bodyTextColor;
background: @bodyBackgroundColor;

a {
    color: @blue;

    &:hover {
        color: darken(@blue, 10%);
    }
}


/*
    Classes */

.pink {
    color: @pink;
}

.white {
    color: @white;
}

.yellow {
    color: @yellow;
}

.green {
    color: @green;
}
.green-hover:hover {
    color: darken(@green, 25%);
}

.red {
    color: @red;
}
.red-hover:hover {
    color: darken(@red, 25%);
}

.blue {
    color: @blue;
}
.blue-hover:hover {
    color: darken(@blue, 25%);
}

.yellow {
    color: @yellow;
}
.yellow-hover:hover {
    color: darken(@yellow, 25%);
}


/*
    Forms */

button {
    background: @blue;

    &:hover {
        background: darken(@blue, 10%);
    }

    &.cancel {
        background: @red;

        &:hover {
            background: darken(@red, 10%);
        }
    }

    &.submit {
        background: @green;

        &:hover {
            background: darken(@green, 10%);
        }
    }

    &.error {
        background: @red;
    }

    &.inactive {
        background: @midGrey;
    }

    &.disabled, &.disabled:hover {
        background: @lightGrey;
    }
}

input, textarea {
    color: @inputColor;
    background: @inputBackgroundColor;
    border-color: @inputBorderColor;

    &:hover, &:focus {
        border-color: @inputBorderHoverColor;
    }
}


/*
    ??? */

span.multi-subject {
    background: @lightGrey;
    color: @lightTextGrey;
}

.tooltip {
    background: @darkestGrey;
    color: @lightestGrey;
}

/*
    Header */

header {
    div.header-errors {
        i {
            &.error {
                color: @red !important;
            }
        }

        div.icon-wrapper {
            a {
                color: white;
            }
        }

        div.icon-contents {
            border-color: @red;
            background: white;
            color: black;

            p {
                border-color: @lightGrey;

                span.meta {
                    color: @darkGrey;
                }

                a {
                    color: @blue;
                }
            }
        }
    }

    &.header-bar {
        background: @headerBackgroundColor;
        border-color: @headerBorderColor;

        button {
            background: transparent;
            color: @lightTextGrey;

            &:hover, &.active {
                background: @headerButtonHoverColor;
            }

            i {
                color: @midGrey;
            }
        }

        div.header-errors {
            div.icon-wrapper a {
                color: @bodyTextColor;
            }
        }
    }
}


/*
    Sidebar */

section#sidebar {
    background: @sidebarBackgroundColor;
    color: @sidebarTextColor;

    header {
        a.compose {
            color: @sidebarHeaderIconColor;
        }

        a.search {
            color: @sidebarHeaderIconColor;
        }
    }

    ul {
        li {
            a, span {
                color: @sidebarLinkTextColor;
            }

            span.update {
                background: @green;
                color: white;
            }

            a {
                &:hover {
                    background: @sidebarLinkHoverBackgroundColor;
                    color: @sidebarLinkHoverTextColor;
                }
            }

            &.active a, &.hover a {
                background: @sidebarLinkHoverBackgroundColor;
                color: @sidebarLinkHoverTextColor;
            }

            i.pin-button {
                &.fa-bookmark:hover {
                    color: @red;
                }
                &.fa-bookmark-o:hover {
                    color: @green;
                }
            }

            &.small {
                a {
                    background: transparent;
                }
            }
        }
    }

    footer {
        color: #666;

        a {
            color: @lightTextGrey;

            &:hover {
                color: @lightestTextGrey;
            }
        }

        section#status {
            background: @lightGrey;
            border-color: #D7D7D7;
        }
    }
}


/*
    Threads overlay */

section#thread-background {
    background: rgba(100, 100, 100, 0.6);
}

section#thread {
    background: @threadBackgroundColor;
    border-color: @threadBorderColor;

    h1 {
        background: @threadTitleBackgroundColor;
        border-color: @threadTitleBorderColor;
    }

    section#meta {
        background: @threadMetaBackgroundColor;
        border-color: @threadMetaBorderColor;

        button#close {
            &:hover {
                color: @red;
            }
        }

        button {
            background: white;
        }

        div#other-buttons {
            button {
                &:hover {
                    color: @blue;
                }
            }
        }

        div#respond-buttons {
            button {
                &:hover {
                    color: @blue;
                }

                &.archive:hover {
                    color: @green;
                }

                &.trash:hover {
                    color: @red;
                }
            }
        }
    }

    a.show-all-messages {
        color: @lightTextGrey;
    }

    button {
        background: @lightestGrey;
        color: @lightTextGrey;

        &.active {
            background: @formBorderGreyHover;
        }
    }

    div.message {
        border-color: @threadMessageBorderColor;

        div.meta {
            span.meta-text {
                color: @lightTextGrey;
            }

            .fa-star {
                color: @blue;
            }

            div.addresses {
                div.avatar {
                    text-shadow: 0 0 1px @darkestGrey;
                }
            }
        }

        div.controls {
            color: @lightTextGrey;

            span.right {
                i {
                    color: @lightTextGrey;
                }
            }

            span.tag {
                background: @lightestGrey;
            }
        }

        .attachment-link {
            background: @lightestGrey;

            .attachment-meta {
                color: @lightTextGrey;
            }
        }
    }
}


/*
    React select overrides */

div.react-select__control {
    background: transparent;
    border-color: @formBorderGrey;

    &:hover {
        border-color: @formBorderGreyHover;
    }
}

div.react-select__control--is-focused {
    border-color: @formBorderGreyActive !important;
}

span.react-select__indicator-separator {
    background: @formBorderGrey;
}

div.react-select__menu {
    border-color: @formBorderGreyHover;
}

div.react-select__option {
    &.react-select__option--is-focused {
        background: @lightGrey;
    }
}


/*
    Meta/License App */

section#meta-file {
    pre, code {
        background: @lightestGrey;
    }
    code {
        padding: 1px;
    }
}


/*
    Columns */

section#columns {
    div#search input {
        border-color: @lightestGrey;
    }

    div.column {
        border-color: @columnBorderColor;

        h3 {
            border-color: @columnTitleBorderColor;

            i.loading {
                color: @formBorderGreyActive;
            }

            span.meta {
                color: @formBorderGreyActive;
            }
        }

        div.emails {
            div.loader {
                color: @lightestTextGrey;
                background: @columnEmailBackgroundColor;
            }

            &::before {
                color: @lightestTextGrey;
            }
        }

        div.email {
            background: @columnEmailBackgroundColor;

            &.hover {
                background: @columnEmailHoverBackgroundColor;
            }

            &.archiving {
                background: @green;
            }

            &.trashing {
                background: @red;
            }

            h4 {
                span {
                    text-shadow-color: @darkestGrey;
                }
            }

            span.date {
                color: @lightTextGrey;
            }

            p {
                color: @formBorderGreyActive;
            }

            div.meta {
                color: @lightTextGrey;

                span.buttons, span.extra-meta {
                    a {
                        color: @lightTextGrey;

                        &.star {
                            &.active, &:hover {
                                color: @yellow;
                            }
                        }

                        &.archive {
                            &.active, &:hover {
                                color: @green;
                            }
                        }

                        &.move {
                            &.active, &:hover {
                                color: @blue;
                            }
                        }

                        &.trash {
                            &.active, &:hover {
                                color: @red;
                            }
                        }
                    }
                }
            }
        }
    }
}


/*
    Send App */

section#new-email {
    form {
        label {
            color: @lightestTextGrey;
        }

        div input {
            border-color: @formBorderGrey;

            &:hover {
                border-color: @formBorderGreyHover;
            }

            &:focus {
                border-color: @formBorderGreyActive;
            }
        }

        blockquote#reply-quote {
            background: @lightestGrey;
            border-color: @lightGrey;
        }

        div.buttons {
            button.save {
                background: @lightestGrey;
                color: @lightTextGrey;

                &:hover {
                    background: @lightGrey;
                }
            }
        }

        div#textarea-body {
            .ql-container {
                &.ql-snow {
                    border-color: @formBorderGrey;
                }
            }

            .ql-toolbar.ql-snow {
                border-color: @formBorderGrey;
            }

            &.active {
                .ql-container.ql-snow, .ql-toolbar.ql-snow {
                    border-color: @formBorderGreyHover;
                }
            }
        }
    }
}


/*
    Settings App */

section#settings {
    div.settings {
        label {
            small {
                color: @lightTextGrey;
            }
        }

        &.advanced {
            background: @lightGrey;
        }
    }
}

div#accounts {
    div.error {
        color: @red;
    }

    .account {
        background: @settingsAccountBackgroundColor;

        small.connected {
            color: green;
        }

        small.not-connected {
            color: red;
        }

        &.active {
            background: @lightGrey;
            border-color:  @midGrey;
        }

        &.new {
            background: #D7D7D7;
        }
    }

    div#account-form-overlay {
        background: @settingsAccountFormOverlayBackgroundColor;

        div.new-account-buttons {
            button {
                color: @bodyTextColor;

                &:hover {
                    background: @settingsNewAccountButtonHoverBackgroundColor;
                }
            }
        }
    }
}


/*
    Contacts App */

section#contacts {
    div#contact-list {
        border-color: @contactListBorderColor;
    }

    div.contact {
        &:hover {
            background: @contactHoverBackgroundColor;
        }
    }
}
